<template>
  <view class="level1 flex flex-col">
    <image class="level1-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />
    <NavigationBar :navigation-title="`第${thday}关`" :go-back="closeOverlay" />
    <view class="answer-content flex-1 transition">
      <view class="answer-progrss item-center flex">
        <view class="progress" :style="{ width: `${(666 / total) * (questionIndex)}rpx` }" />
        <text class="text">
          {{ `${questionIndex}/${total}` }}
        </text>
      </view>

      <FillItem ref="fillItemRef" :question="question" />
    </view>

    <view class="answer-btn">
      <text class="btn-text" @click="handleSumbit">
        提交本题
      </text>
    </view>

    <up-overlay :show="showOverlay" :opacity="0.8">
      <view class="finish-warp flex flex-col items-center">
        <image class="finish-text" src="https://app5.shuguostar.cn/imgs/images/answer/text.png" />
        <image class="finish-bg" src="https://app5.shuguostar.cn/imgs/images/answer/icon_bg.png" />
        <image class="finish-ip" src="https://app5.shuguostar.cn/imgs/images/answer/IP_1.png" />

        <view class="finish-content">
          <text class="text">
            正确率<text class="big-text">
              {{ Number(answerResult?.resultRate) * 100 }}
            </text>%
          </text>
        </view>

        <image class="close-icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_close.png" @click="closeOverlay" />
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import data from './data.json';
import FillItem from '@/pages/views/answer/components/fillItem.vue';
import NavigationBar from '@/components/navigation-bar/index.vue';
import type { FillQuestion } from '@/pages/views/demo/type';

const total = ref<number>(0);
const questionIndex = ref<number>(0);
const questionList = ref<Array<FillQuestion>>([]);
const question = ref<FillQuestion>();

const showOverlay = ref<boolean>(false);
const thday = ref<string>('');

let bgAudioContext: any;
let btnAudioContext: any;
const playAudio = () => {
  bgAudioContext = uni.createInnerAudioContext();
  bgAudioContext.autoplay = true;
  bgAudioContext.loop = true;
  bgAudioContext.volume = 0.4;
  bgAudioContext.src = 'https://app5.shuguostar.cn/imgs/bookVido/audio/bg.mp3';
};

const pauseAudio = () => {
  bgAudioContext?.destroy();
  btnAudioContext?.destroy();
  bgAudioContext = null;
  btnAudioContext = null;
};

const playBtnAudio = (type: number) => {
  btnAudioContext = uni.createInnerAudioContext();
  btnAudioContext.autoplay = true;
  btnAudioContext.src = type === 1 ? 'https://app5.shuguostar.cn/imgs/bookVido/audio/btn_bg.mp3' : 'https://app5.shuguostar.cn/imgs/bookVido/audio/success.mp3';
};

const start = () => {
  if (questionIndex.value + 1 > total.value) {
    return;
  }
  question.value = questionList.value[questionIndex.value];
  questionIndex.value++;
};

const getData = () => {
  questionList.value = data.level1 as Array<FillQuestion>;
  total.value = data.level1.length;
  start();
};

const fillItemRef = ref<InstanceType<typeof FillItem> | null>(null);
const answerResult = ref<{ resultRate: number }>();
const handleSumbit = () => {
  fillItemRef.value?.pauseAudio();
  playBtnAudio(1);
  answerResult.value = { resultRate: 1 };
  console.log('提交成功', question.value, fillItemRef.value?.answerTextList, fillItemRef.value?.answerList);
  setTimeout(() => {
    if (questionIndex.value === total.value) {
      showOverlay.value = true;
      playBtnAudio(2);
    }
    else {
      start();
    }
  }, 1000);
};

const closeOverlay = () => {
  showOverlay.value = false;
  uni.navigateBack();
  fillItemRef.value?.pauseAudio();
  pauseAudio();
};

onLoad((option: any) => {
  thday.value = option.thday;
  getData();
  playAudio();
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.level1 {
  position: relative;
  min-height: 100%;
  padding-top: 188rpx;
  background: linear-gradient( 90deg, #4FB0FE 0%, #2B9BF6 100%);

  .level1-bg {
    position: absolute;
    top: 110rpx;
    left: 36rpx;
    width: 666rpx;
    height: 124rpx;
  }

  .answer-content {
    height: 100%;
    padding: 40rpx;
    overflow: auto;

    .answer-progrss {
      position: relative;
      width: 100%;
      height: 48rpx;
      background: rgba(0,0,0,0.5);
      border-radius: 24rpx;
      border: 2rpx solid rgba(255,255,255,0.08);
      overflow: hidden;

      .progress {
        height: 100%;
        background: #FCD24E;
        border-radius: 20rpx;
      }

      .text {
        position: absolute;
        top: 0;
        right: 32rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #fff;
      }
    }
  }

  .answer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 40rpx;
    background: #fff;
    z-index: 3;

    .btn-text {
      display: block;
      font-size: 32rpx;
      line-height: 92rpx;
      text-align: center;
      background: #4AAAF8;
      color: #fff;
      border-radius: 46rpx;
    }
  }

  .finish-warp {
    position: relative;

    .finish-text {
      position: relative;
      width: 384rpx;
      height: 64rpx;
      z-index: 1;
    }

    .finish-bg {
      position: absolute;
      top: 40rpx;
      width: 540rpx;
      height: 380rpx;
    }

    .finish-ip {
      position: absolute;
      top: 108rpx;
      width: 200rpx;
      height: 240rpx;
    }

    .finish-content {
      position: relative;
      padding-top: 304rpx;
      z-index: 3;

      .text {
        display: block;
        font-size: 28rpx;
        line-height: 56rpx;
        color: #FFFDF2;

        .big-text {
          font-size: 40rpx;
          color: #FFF8D9;
        }
      }
    }

    .close-icon {
      margin-top: 64rpx;
      width: 64rpx;
      height: 64rpx;
    }
  }
}

:deep(.u-fade-enter-to) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.fill-item) {
  .u-input {
    display: inline-block !important;
    width: 120rpx !important;
    padding: 6rpx 9rpx !important;
    // line-height: 44rpx;
    height: 56rpx;
  }
}
</style>
